<template>
  <div class="n-cmt" id="comment-box">
    <div id="auto-id-1dJSueTPuXIDfbBF">
      <div class="u-title u-title-1">
        <h3><span class="f-ff2">评论</span></h3>
        <span class="sub s-fc3"
          >共<span class="j-flag">{{ res.total }}</span
          >条评论</span
        >
      </div>
      <div class="m-cmmt">
        <!-- 填写评论 -->
        <div class="iptarea">
          <!-- 头像区域 -->
          <div class="head">
            <img :src="headImg" />
          </div>
          <!-- 文本框 -->
          <div class="j-flag">
            <div>
              <div class="m-cmmtipt f-cb f-pr">
                <div
                  class="u-txtwrap holder-parent f-pr"
                  style="display: block;"
                >
                  <textarea
                    @click="LoginBeforeComment"
                    class="u-txt area j-flag"
                    placeholder="评论"
                  ></textarea>
                </div>
                <div class="btns f-cb f-pr">
                  <i class="icn u-icn u-icn-36 j-flag"></i
                  ><i class="icn u-icn u-icn-41 j-flag"></i
                  ><a
                    href="javascript:void(0)"
                    class="btn u-btn u-btn-1 j-flag"
                    @click="addComment"
                    >评论</a
                  ><span class="zs s-fc4 j-flag">140</span>
                </div>
                <div class="corr u-arr">
                  <em class="arrline">◆</em><span class="arrclr">◆</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 评论区域 -->
        <div class="cmmts j-flag" id="auto-id-aolrA5sTa7LCHbPB">
          <!-- 精彩评论 -->
          <div v-if="isNewComment">
            <h3 class="u-hd4" v-show="res.hotComments.length != 0">精彩评论</h3>
            <div
              class="itm"
              :data-id="Hcomment.commentId"
              v-for="Hcomment in hotComments"
              :key="Hcomment.commentId"
            >
              <div class="head">
                <a href="javascript:;"><img :src="Hcomment.user.avatarUrl"/></a>
              </div>
              <div class="cntwrap">
                <div class="">
                  <div class="cnt f-brk">
                    <a href="javascript:;" class="s-fc7">{{
                      Hcomment.user.nickname
                    }}</a
                    ><img
                      v-if="Hcomment.user.vipType"
                      src="//p1.music.126.net/iOnYL-pAvH2LuQfStGOjfQ==/109951163709553273.png"
                      class="brand-tag brand-vip"
                    />：{{ Hcomment.content }}
                  </div>
                </div>
                <div
                  v-if="Hcomment.parentCommentId != 0"
                  class="que f-brk f-pr s-fc3"
                >
                  <span class="darr"
                    ><i class="bd">◆</i><i class="bg">◆</i></span
                  ><a class="s-fc7" href="javascript:;">{{
                    Hcomment.beReplied[0].user.nickname
                  }}</a
                  >：{{ Hcomment.beReplied[0].content }}
                </div>
                <div class="rp">
                  <div class="time s-fc4">
                    {{ Hcomment.time | timefmtS }}
                  </div>
                  <a href="javascript:void(0)"
                    ><i class="zan u-icn2 u-icn2-12"></i>
                    {{ Hcomment.likedCount ? Hcomment.likedCount : "" }}</a
                  ><span class="sep">|</span
                  ><a href="javascript:void(0)" class="s-fc3">回复</a>
                </div>
              </div>
            </div>
          </div>

          <br /><br />
          <!-- 所有评论 -->
          <h3 class="u-hd4" v-if="isNewComment && res.total != 0">
            最新评论({{ res.total }})
          </h3>
          <div
            class="itm"
            data-id="3417412649"
            v-for="comment in comments"
            :key="comment.commentId"
          >
            <div class="head">
              <a href="javascript:;"><img :src="comment.user.avatarUrl"/></a>
            </div>
            <div class="cntwrap">
              <div class="">
                <div class="cnt f-brk">
                  <a href="javascript:;" class="s-fc7">{{
                    comment.user.nickname
                  }}</a
                  >：
                  {{ comment.content }}
                </div>
              </div>
              <div
                v-if="comment.parentCommentId != 0"
                class="que f-brk f-pr s-fc3"
              >
                <span class="darr"><i class="bd">◆</i><i class="bg">◆</i></span
                ><a class="s-fc7" href="javascript:;">{{
                  comment.beReplied[0].user.nickname
                }}</a
                >：{{ comment.beReplied[0].content }}
              </div>
              <div class="rp">
                <div class="time s-fc4">{{ comment.time | timefmtS }}</div>
                <a href="javascript:void(0)"
                  ><i class="zan u-icn2 u-icn2-12"></i
                  >{{ comment.likedCount ? comment.likedCount : "" }}</a
                ><span class="sep">|</span
                ><a
                  href="javascript:void(0)"
                  class="s-fc3"
                  data-id="3417412649"
                  data-type="reply"
                  >回复</a
                >
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="j-flag u-page" v-if="res.total>20" @click="gopage()">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="res.total / 2"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DengLu from "@/components/DengLu/index";
export default {
  props: ["type", "id"],
  data: () => ({
    res: null,
    hotComments: [],
    comments: [],
    offset: 0,
    isNotLogin: false,
    isNewComment: true,
    user: {},
    headImg:
      "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg",
  }),
  created() {
    this.getCommentById(this.type, this.id);
    this.user = JSON.parse(localStorage.getItem("User"));
    if (this.user) this.headImg = this.user.avatarUrl;
    // console.log(this.user);
  },
  methods: {
    async getCommentById(type, id) {
      const { data } = await this.Api.wjwApi.getCommentById(type, id);
      // console.log(data);
      this.res = data;
      this.hotComments = data.hotComments;
      this.comments = data.comments;
      // console.log(this.comments);
    },
    async getMoreComment(type, id, offset) {
      const { data } = await this.Api.wjwApi.getCommentById(type, id, offset);
      this.comments = data.comments;
    },
    gopage() {
      const n = document.querySelector(".el-pagination .active").textContent;
      this.offset = (n - 1) * 20;
      this.getMoreComment(this.type, this.id, this.offset);
      n == 1 ? (this.isNewComment = true) : (this.isNewComment = false);
    },
    LoginBeforeComment() {
      if (!localStorage.getItem("token")) {
        // this.isNotLogin = true;
        let phoneLogin = document.querySelector(".phoneLogin");
        let dengLu = document.querySelector(".dengLu");
        let dengluTao = document.querySelector(".dengluTao");
        let ZDL = document.querySelector(".ZDL");
        dengLu.style.display = "block";
        // dengluTao.style.display="block"
        // phoneLogin.style.display="none"
        ZDL.style.display = "none";
      }
    },
    addComment() {
      let area = document.querySelector(".u-txt.area").value;
      console.log(area);
      if (area.trim()) {
        let time = new Date().getTime();
        let obj = {
          beReplied: [],
          commentId: time,
          commentLocationType: 0,
          content: area,
          decoration: {},
          expressionUrl: null,
          liked: false,
          likedCount: 0,
          parentCommentId: "",
          status: 0,
          time: time,
          user: this.user,
        };
        this.comments.unshift(obj);
        console.log(this.comments);
        this.switchType(this.type);
        this.sendComment(this.type, this.id, area);
      }
    },
    async sendComment(type, id, content) {
      const { data } = await this.Api.wjwApi.sendComment(type, id, content);
      // console.log(data);
    },
    switchType(type) {
      switch (type) {
        // 0: 歌曲
        // 1: mv
        // 2: 歌单
        // 3: 专辑
        // 4: 电台
        // 5: 视频
        // 6: 动态
        case "song":
          this.type = 0;
          break;
        case "mv":
          this.type = 1;
          break;
        case "songlist":
          this.type = 2;
          break;
        case "album":
          this.type = 3;
          break;
        case "dj":
          this.type = 4;
          break;
        case "video":
          this.type = 5;
          break;
        case "dynamic":
          this.type = 6;
          break;
      }
    },
  },
  components: {
    DengLu,
  },
};
</script>
<style lang="less">
.n-cmt {
  margin-top: 40px;
}
.u-title {
  height: 33px;
  border-bottom: 2px solid #c20c0c;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.u-title-1 h3 {
  font-size: 20px;
  line-height: 28px;
}
.u-btn,
div.u-page a,
div.u-page a.js-selected,
div.u-page a.znxt.js-disabled,
div.u-page a.zprv.js-disabled {
  background: url("../../assets/wjwimgs/button.png") no-repeat 0 9999px;
}
.u-title .sub {
  float: left;
  margin: 13px 0 0 10px;
}
.u-title-1 .sub {
  margin: 9px 0 0 20px;
}
.m-cmmt {
  margin-top: 20px;
}
.m-cmmt .iptarea {
  margin-bottom: 20px;
}
.m-cmmt .head,
.m-cmmt .head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .head,
.m-cmmt .head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
img,
.txt {
  border: 0;
}
.m-cmmt .iptarea .m-cmmtipt {
  margin-left: 62px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
div.holder-parent {
  position: relative;
  zoom: 1;
}
.u-txtwrap {
  padding-right: 14px;
}
textarea {
  resize: none;
  overflow: auto;
  outline: none;
}
textarea.u-txt,
.u-txt {
  height: 19px;
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
}
textarea.u-txt,
div.u-txt {
  width: 100%;
  margin-right: -20px;
}
.m-cmmtipt .area {
  height: 50px;
  display: block;
}
.m-cmmtipt .btns {
  clear: both;
  padding-top: 10px;
}
.u-icn-36 {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
}
.m-cmmtipt .btns .icn {
  float: left;
  margin: 0px 10px 0 0;
  cursor: pointer;
}
.u-icn-41 {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}

.u-btn {
  display: inline-block;
}
.u-btn-1 {
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}
.m-cmmtipt .btns .btn {
  float: right;
}
.m-cmmtipt .btns .zs {
  float: right;
  margin-right: 10px;
  line-height: 25px;
}
.m-cmmtipt .corr {
  position: absolute;
  top: 11px;
  left: -7px;
}
.u-arr {
  width: 13px;
  height: 14px;
  overflow: hidden;
}
.u-arr .arrline {
  color: #cdcdcd;
}
.u-arr .arrline,
.u-arr .arrclr,
.u-arr .arriner {
  display: block;
  font-family: "SimSun";
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  height: 10px;
  line-height: normal;
}
.u-arr .arrclr {
  margin: -10px 0 0 1px;
  color: #fff;
}
.u-hd4 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
}
.m-cmmt .cmmts .itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.m-cmmt .head,
.m-cmmt .head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .cmmts img {
  vertical-align: middle;
}
.m-cmmt .cmmts .cntwrap {
  margin-left: 60px;
}
.m-cmmt .cmmts .cnt {
  width: 100%;
  overflow: hidden;
  line-height: 20px;
}
.m-cmmt .cmmts .cntwrap .f-brk,
.m-cmmt .cmmts .cnt.f-brk {
  word-break: break-word;
}
.m-cmmt .cmmts .cntwrap .s-fc7 {
  margin-right: 5px;
}
.m-cmmt .cmmts .cntwrap .brand-vip {
  height: 12px;
}
.m-cmmt .cmmts .cntwrap .brand-tag {
  margin-right: 5px;
  vertical-align: -1px;
}
.m-cmmt .cmmts .que {
  padding: 8px 19px;
  margin-top: 10px;
  line-height: 20px;
  background: #f4f4f4;
  border: 1px solid #dedede;
}
.m-cmmt .cmmts .que .darr {
  position: absolute;
  top: -7px;
  left: 20px;
  font-size: 12px;
  line-height: 14px;
}
.m-cmmt .cmmts .que .darr .bd {
  color: #dedede;
}
.m-cmmt .cmmts .que .darr i {
  position: absolute;
  top: 0;
  left: 0;
}
.m-cmmt .cmmts .que .darr .bg {
  top: 1px;
  color: #f4f4f4;
}
.m-cmmt .cmmts .que .darr i {
  position: absolute;
  top: 0;
  left: 0;
}
.m-cmmt .cmmts div.rp {
  margin-top: 15px;
  text-align: right;
}
.m-cmmt .cmmts .time {
  float: left;
  margin: 0 !important;
}
.rp .u-icn2-12,
.u-icn2-13 {
  width: 15px;
  height: 14px;
  background-position: -150px 0;
}
.m-cmmt .cmmts .cntwrap .u-icn2 {
  margin-right: 5px;
  vertical-align: -2px;
}
.m-cmmt .cmmts .zan {
  margin-top: -4px;
}
.m-cmmt .cmmts .sep {
  margin: 0 8px;
  color: #ccc;
}
.u-hd4 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
}
div.u-page {
  margin: 20px 0;
  text-align: center;
}
.el-pager li.active {
  color: #c20c0c;
  cursor: default;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c20c0c;
  color: #fff;
}
</style>
